<template>
	<view class="home-container">
		<view class="search">
			<view class="nav-bar">
				<!-- 利用垫片 处理小程序以及app的默认导航栏 -->
				<view :style="{height:statusHeight+'rpx'}"></view>
				<view class="nav-bar-content" :style="{marginRight:marginRight+'rpx'}">
					<uni-icons type="search" color="#999"></uni-icons>
					<view class="search-input" @click="openAddress">
						{{searchValue? searchValue : "请选择地址进行搜索"}}
					</view>
					<uni-icons v-if="searchValue!==''" @click="clear" type="close" color="#999" size="25"></uni-icons>
				</view>
			</view>
			<!-- 底部垫片 -->
			<view :style="{height:80+statusHeight+'rpx'}"></view>
		</view>
		<view class="list">
			<view class="list-scroll-container">
				<!-- scrolltolower事件可以监听加载到底部 -->
				<scroll-view scroll-y="true" class="list-scroll" @scrolltolower="loadMore">
					<view v-for="(item,index) in list" :key="index">
						<view class="list-card">
							<view @click="goDetail(item._id)">
								<view class="list-card-top">
									<text class="txt">{{item.title}}</text>
									<view @click.stop="collect(item._id)">
										<uni-icons :type="isLike(item._id)" size="30" color="#ff6600"></uni-icons>
									</view>
								</view>
								<view class="list-card-middle">
									<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
										<swiper-item v-for="(demo,id) in item.imgArr" :key="id">
											<image :src="demo" mode=""></image>
										</swiper-item>
									</swiper>
								</view>
								<view class="list-card-bottom">
									<view class="article-type">
										{{item.province}}
									</view>
									<view class="browser-number">
										{{item.scan}} 浏览
									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more v-if="list.length > 5 && isShowLoadMore" :status="loadData || 'loading'">
					</uni-load-more>
				</scroll-view>
			</view>
		</view>
		<!-- 垫片 -->
		<view style="margin:0;height: 10rpx;">
			<liu-customize-sel ref="scroll" @change='chooseSuccess'></liu-customize-sel>
		</view>

		<view class="no-data" v-if="list.length === 0">
			暂无查询结果
		</view>
	</view>
</template>

<script>
	import {
		getInfo,
		collectInfo
	} from "../../ajax/api/home.js";
	import {
		whoami
	} from "../../ajax/api/login.js";
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				current: 1,
				pageSize: 5,
				status: 2, //通过审核的招募
				statusHeight: 20,
				marginRight: 0,
				searchValue: "", //搜索内容
				list: [],
				loadData: "loading",
				isShowLoadMore: true,
			}
		},
		computed: {
			...mapState(["userInfo", "token"]),
		},
		async onShow() {
			if (this.token) {
				// 有token调用whoami
				const userInfo = await whoami();
				this.updateUserInfo(userInfo);
			}
			const res = await getInfo({
				current: this.current,
				pageSize: this.pageSize,
				status: this.status
			})
			this.list = res.rows;
			this.getSystemInfo();
		},
		methods: {
			...mapMutations(["updateUserInfo"]),
			isLike(id){
				if(this.userInfo && this.userInfo.collect.includes(id)){
					return "heart-filled"
				}else{
					return "heart"
				}
			},
			// 收藏
			async collect(id) {
				if (this.userInfo) {
					// 登录状态
					if (this.userInfo.collect) {
						// 有收藏状态
						let collect = JSON.parse(JSON.stringify(this.userInfo.collect));
						let isCollect = false;
						// 判断是否已经收藏
						collect.forEach(async (item, index) => {
							if (item === id) {
								// 表示有已经收藏的
								collect.splice(index, 1);
								isCollect = true;
								const res = await collectInfo({
									collect
								})
							}
						})
						// 没有收藏过
						if (!isCollect) {
							collect.push(id)
							const res = await collectInfo({
								collect
							})
						}
						// 更新userInfo
						const userInfo = {
							...this.userInfo,
							collect
						};
						this.updateUserInfo(userInfo);
					} else {
						let collect = [id];
						const userInfo = {
							...this.userInfo,
							collect
						};
						const res = await collectInfo({
							collect,
						})

						// 更新userInfo
						this.updateUserInfo(userInfo);
					}
				} else {
					// 没有登录就跳转到登录界面
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			// 清空搜索
			async clear() {
				this.searchValue = "";
				const res = await getInfo({
					current: this.current,
					pageSize: this.pageSize,
					status: this.status
				})
				this.list = res.rows;
			},
			openAddress() {
				this.$refs.scroll.open()
			},
			//地址选择成功
			async chooseSuccess(e) {
				this.searchValue = e.value[0].label + " · " + e.value[1].label + " · " + e.value[2].label;
				const res = await getInfo({
					current: this.current,
					pageSize: this.pageSize,
					status: this.status,
					province: this.searchValue
				})
				this.list = res.rows;
			},
			getSystemInfo() {
				// 获取设备信息
				const systemInfo = uni.getSystemInfoSync();
				// 设置状态栏高度
				this.statusHeight = systemInfo.statusBarHeight ? systemInfo.statusBarHeight * 2 : this.statusHeight;
				// #ifdef MP-WEIXIN
				// 获取胶囊信息值
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.marginRight = menuButtonInfo.width * 2;
				this.statusHeight = menuButtonInfo.top * 2; //与胶囊对其顶部距离相等
				// 为什么statusHieght获取到的信息值要*2，因为获取到的像素值转为rpx需要*2
				// #endif
			},
			// 跳转到详情页
			goDetail(id) {
				this.$Router.push({
					name: "detail",
					params: {
						id,
					}
				})
			},
			// 加载更多
			async loadMore() {
				this.isShowLoadMore = true;
				this.current++;
				const res = await getInfo({
					current: this.current,
					pageSize: this.pageSize,
					status: this.status
				})
				this.list.push(res.rows);
				this.isShowLoadMore = false;
				if (res.count === list.length) {
					// 全部数据加载完成
					this.loadData = "no-more";
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./css/home.scss";
</style>
